﻿<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>我的足迹</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAPTwhF4vlVXrO7ZGOjA9sOxTqQ5WtUwE0C8FR1hRk-yj3qFOmhhR6esbxCerNyfzApAoTJGfOHzcKCQ"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
		map.addControl(new GLargeMapControl ());
        map.addControl(new GScaleControl());
        // 允许使用鼠标滚轮缩放
        map.enableScrollWheelZoom();
		// 设置地图为全国视野，以便看到北京，上海，广州
        map.setCenter(new GLatLng(34.597, 106.083), 5);
        document.getElementById("map_zoom").innerHTML = map.getZoom();
        GEvent.addListener(map, "zoomend", function() {
          document.getElementById("map_zoom").innerHTML = map.getZoom();
        });

        // 远程取数据
        // GDownloadUrl("http://chinamaps.googlecode.com/svn/mapsapi/gddcodelab/data/cities.json",
        GDownloadUrl("data/cities.json",
                     function(data, responseCode) {
           var cities = eval(data);
		   if (cities.length > 0) {
		     addVisitedCities(map, cities);
           }
        });
	  }
    }

    function addVisitedCities(map, cities) {
   	  for (var i = 0; i < cities.length; i++) {
        addMarker(map, cities[i]);
      }

      var points = [];
      for (var j = 0; j < cities.length; j++) {
        points.push(new GLatLng(cities[j].point.lat,  
                                cities[j].point.lng));
      }
      map.addOverlay(new GPolyline(points));
    }
	
    function addMarker(map, city) {
      var tabs = [];
	  // 生成tab内容
	  for (var i = 0; i < city.tabs.length; i++) {
	    tabs.push(new GInfoWindowTab(city.tabs[i].title, city.tabs[i].details));
	  }

       // 创建自己的图标
       var icon = new GIcon();
       icon.image = "http://maps.google.com/mapfiles/kml/shapes/flag_maps.png";
	   icon.shadow = "http://maps.google.com/mapfiles/kml/shapes/flag_maps_shadow.png";
	   icon.iconSize = new GSize(40, 40);
       icon.shadowSize = new GSize(44, 40);
       icon.iconAnchor = new GPoint(6, 20);
       icon.infoWindowAnchor = new GPoint(5, 1);

	   var marker = new GMarker(new GLatLng(city.point.lat, city.point.lng), icon);
       map.addOverlay(marker);
	  
      GEvent.addListener(marker, "click", function() {
        // 点击Marker时打开信息窗口，添加到Marker中， 设置窗口的宽度，默认页
        marker.openInfoWindowTabsHtml(tabs, {selectedTab : 1});
      });
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 900px; height: 700px"></div>
	<p>当前地图的缩放层次为: <span id="map_zoom"></span></p>
  </body>
</html>